{% extends "html/sidebar.html" %}

{% block pageTitle %}<title>{{ river.name }}</title>{% endblock pageTitle %}

{% block style %}
    {{ block.super }}
    {% comment %}link to css for this page{% endcomment %}
{% endblock style %}

{% block script %}
    {{ block.super }}
    {% comment %}link to js for this page{% endcomment %}
    <script type="text/javascript" src="{{STATIC_URL}}js/river.js" ></script>
{% endblock script%}


{% block content %}
    {{ block.super }}
    {% comment %}This is the page for a river. Based on the river's characteristics, certain options are presented to the user.{% endcomment %}
    <div id="info"><h1>Welcome to {{ landmark.name }}</h1></div>
    {% if river.image %}<img src='{{ river.image.url }}' height='300' width='300'></img>{% endif %}
    <div id="options">
    <h3>Choose an option from below:</h3>
    {% if store %}
    	<a href='{% url travel_game.views.renderStore %}' class='button'>{{ store.name }}</a></br>
    {% endif %}
    {% if river.currentDepth < 3 %}<div><a href='{% url travel_game.views.ford %}' class='button' id='fordButton'>Attempt to ford</a></div>{% endif %}
    {% if river.ferry %}<div><a href='{% url travel_game.views.ferry %}' class='button' id='ferryButton'>Take Ferry</a></div>{% endif %}
    <div><a href='{% url travel_game.views.caulk %}' class='button' id='caulkButton'>Caulk wagon and float</a></div>
    </div>
{% endblock content %}